<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水印旋转</title>
    <link rel="shortcut icon" href="../lib/image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../lib/css/all.css">

</head>

<body>
    <div id="app">
        <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
            当前浏览器不支持canvas
        </canvas>
    </div>

    <script>

        window.onload = function () {

            let canvas = document.getElementById("canvas");
            canvas.width = 700;
            canvas.height = 300;
            let context = canvas.getContext("2d");

            context.fillStyle = "green";
            context.fillText("中文ABCDEFG", 100, 100);

            context.save();
            context.translate(100, 100);
            context.rotate(90 * Math.PI / 180);
            context.fillStyle = "red";
            context.fillText("中文ABCDEFG", 0, 0);
            context.restore();

            //中心位置旋转
            let strWidth = context.measureText("中文ABCDEFG").width;
            context.save();
            context.translate(100 + strWidth / 2, 100 - strWidth / 2);
            context.rotate(90 * Math.PI / 180);
            context.fillStyle = "blue";
            context.fillText("中文ABCDEFG", 0, 0);
            context.restore();

            context.fillStyle = "black";
            context.fillText("中文ABCDEFG", 10, 10);
            context.restore();
        }

    </script>
</body>

</html>